<template>
  <div id="#sss">
    <!-- 1导航条 -->
    <div id="app">
      <img src="@/assets/images/logo.jpg" alt="" class="imgs">
      <ul class="ul1">
        <li :class='cIndex==index?"actives":""' :key='tem.id' v-for='(tem,index) in blist'><a href="">{{tem.titl}}
            |</a></li>
        <li><img src="@/assets/images/tel.jpg" alt=""></li>
      </ul>
    </div>
    <!-- 2 -->
    <div class="con">
      <div class="conz">
        <h1>专注网站开发20年</h1>
        <span>Focus on webite deveiopment for 20 years</span>
        <p>移动应用开发 微信平台开发 嵌入式开发 电子商务平台 ERP /CRM /CMS /EHR 美工设计</p>
      </div>
    </div>

    <!-- 3 -->
    <div class="con3">
      <h3 class="h33">解决方案</h3>
      <p class="pp">————TECHNICAL SERVICE————</p>
      <!-- 3-1小部分 -->
      <div class="con3-h"><a href="">互联网+</a></div>
      <ul class="bot-ul">
        <li v-for="(item,index) in list" :key="index">
          <img class="index-img" :src="item.load">
          <br>
          <a href="" style=" color: black; text-decoration: none;font-size: 13px;">{{item.name}}</a>
        </li>
      </ul>
      <!-- 3-2小部分· -->
      <div class="con3-h"><a href="">企业信息化</a></div>
      <p class="con3p"><a href="">将企业的生产过程物理移动事务处理现金流动客户交互等业务过程数据数字化，通过各种信息系统网络加工。
          诚心的信息资源提供给各层次的人们洞悉，观察各类动态业务的一切信息，以作出有利于生产要素结合优化的决策，
          以企业资源合理配置，已使企业能适应瞬息万变的市场经济竞争环境，求得最大的经济效益，多年的积累，
          信息科技公司在以下行业具有丰富的企业信息化指定开发经验：</a></p>

      <ul class="con3ul">
        <li>
          <img src="@/assets/images/so_img5.jpg" alt="">
          <br>
          <a href="">金融，银行，风险投资...</a>
        </li>
        <li class="te">
          <img src="@/assets/images/so_img6.jpg" alt="">
          <br>
          <a href="">制造业</a>
        </li>
        <li v-for="(item,index) in st" :key="index">
          <img class="index-img" :src="item.load">
          <br>
          <a href="">{{item.name}}</a>
        </li>
        <li>
          <img src="@/assets/images/so_img10.jpg" alt="">
          <br>
          <a href="">媒体</a>
        </li>
        <li class="te">
          <img src="@/assets/images/so_img11.jpg" alt="">
          <br>
          <a href="">教育</a>
        </li>
      </ul>

      <!-- 3-3小部分 -->
      <div class="con3-h"><a href="">专业电脑软件、手机APP外包服务</a></div>
      <p class="con3p"><a href="">
          信息科技公司是专业从事移动互联网软件开发与外包的服务型公司，专业的电脑软件移动软件外包定制应用开发商，拥有微软认证资格框架师十年以上资深工程师行业资深技术工程师等数十人，为您提供卓越的交互设计极致的用户体验精准的数据分析，做客户的技术团队，将项目负责到底，另外还从事网站微网站。GUI等产品的设计与研发
        </a>
      </p>
    </div>

    <!-- 4地图 -->
    <div>
      <vue-map v-model="center" keyword="北京"></vue-map>
    </div>

    <div class="bot">
      <ul class="ul5">
        <li :class='cIndex==index?"actives":""' :key='tem.id' v-for='(tem,index) in blist'><a href="">{{tem.titl}}
            |</a></li>
      </ul>
      <div class="botd">
        <p><a href="">联系我们</a></p>
        <p><a href="">信息科技有限公司</a></p>
        <p><a href="">Infomation Technology Co.Ltd</a></p>
        <div class="hen"></div>

        <ul class="bot-ul">
          <li v-for="(item,index) in lic" :key="index">
            <img class="index-img" :src="item.load">
            <br>
            <span>{{item.name}}</span>
          </li>

        </ul>


      </div>
    </div>

  </div>
</template>

<script>
  import VueMap from "@halobear/vue-amap";
  export default {
    name: 'xin2',
    data() {
      return {

        // 4
        // 4地图
        center: [116.39, 39.9],


        // 1.

        cIndex: 0,
        blist: [{
            id: 1,
            titl: '首页',
          },
          {
            id: 2,
            titl: '关于我们',
          },
          {
            id: 3,
            titl: '解决方案',
          },
          {
            id: 4,
            titl: '技术服务',
          },
          {
            id: 5,
            titl: '新闻中心',
          },
          {
            id: 6,
            titl: '联系我们',
          },
        ],

        // 3
        list: [{
            load: require('@/assets/images/so_img1.jpg'),
            name: "“互联网+”电站解决方案我们为您提供PC建站，移动建站的全套解决方案，助您利用互联网连接一切，在这里您可以放心的托管给我们帮助完成域名购买,域名备案,服务器配置等操作，网站上线后，我们会负责为您保障网站安全防DDos攻击，让您建站过程日常运营省心安心。"
          },
          {
            load: require('@/assets/images/so_img2.jpg'),
            name: "“互联网+”智慧城市解决方案，我们对智慧城市的运营有着丰富的实战经验，对省，市，县各级城市民生公众信息，如公交系统公共自行车系统城市停车导引系统等有着自己的一套操作模式，从信息采集到构建数据平台，再到精细化运营，信息科技公司互联网+智慧城市可以全面覆盖丰富的操作经验以及专业的专业团队，构建了互联网+智慧城市项目稳定运行的基石。"
          },
          {
            load: require('@/assets/images/so_img3.jpg'),
            name: "互联网+电子商务新媒体等解决方案通过微信陌陌QQ微博等社交营销软件专业，为传统行业提供新媒体营销外包服务，拓展互联网+电子商务运营，助力您的业务腾飞"
          },
          {
            load: require('@/assets/images/so_img4.jpg'),
            name: "互联网+微信解决方案，微信逐渐成为一种生活方式，信息科技公司。各大企业，传统行业零售业提供完整的移动电商解决方案，为社会化分销平台，为零售行业提供全渠道的电商解决方案，帮助企业搭建新一代微商分销体系，实现线上线下互通的客户沉淀，同时帮助广大企业建设微信平台，助力微信营销的全面发展"
          }

        ],


        st: [{
            load: require('@/assets/images/so_img7.jpg'),
            name: "物流"
          },
          {
            load: require('@/assets/images/so_img8.jpg'),
            name: "医疗"
          },
          {
            load: require('@/assets/images/so_img9.jpg'),
            name: "房地产"
          }


        ],


        // 5
        lic: [{
            load: require('@/assets/images/ft1.png'),
            name: "江苏省昆明市"
          },
          {
            load: require('@/assets/images/ft2.png'),
            name: "XXXX@xxxx.com"
          },
          {
            load: require('@/assets/images/ft3.png'),
            name: "手机号:XXXXXXXXXXX"
          }

        ]




      }
    },

    components: {
      VueMap
    },
  }
</script>


<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  #app {
    width: 100%;
    height: 50px;
    position: relative;
    margin-bottom: 12px;
  }

  #app .imgs {
    display: block;
    width: 100px;
    height: 59px;
    margin-left: 20px;
  }

  #app .ul1 {
    width: 920px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
  }

  #app .ul1 li {
    width: 100px;
    height: 40px;
    float: left;
    list-style: none;
    margin: 10px 5px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
  }

  #app .ul1 li a,
  .tu h2 a {
    color: black;
    text-decoration: none;
  }

  /* 2 */
  .con {
    width: 100%;
    height: 500px;
    background-image: url(../assets/images/banner4.png);
    background-size: 100% 500px;
    background-repeat: no-repeat;
    position: relative;

  }

  .conz {
    width: 638px;
    height: 230px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }

  .conz p {
    margin-top: 68px;
  }

  /* 3 */
  .con3 {
    width: 960px;
    /* background-color: #1E90FF; */
    margin: 10px auto;
    overflow: hidden;
  }

  .con3 .h33,
  .con3 .pp {
    margin-top: 10px;
    text-align: center;
  }

  .con3-h {
    width: 100%;
    height: 30px;
    /* background-color: #000000; */
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .con3-h a {
    color: white;
    text-decoration: none;
  }

  .con3 .bot-ul {
    width: 100%;
    height: 360px;
    /* background-color: #DB7093; */
    display: flex;
    flex-direction: row;
  }

  .con3 .bot-ul li {
    width: 238px;
    height: 360px;
    /* border: 1px solid #FF0000; */
    list-style: none;
  }

  .con3 .bot-ul li img {
    width: 100%;
    height: 100px;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 2px;
  }

  .con3 .bot-ul li span {
    font-size: 12px;
    margin: 17px;
  }

  .con3p {
    width: 900px;
    height: 100px;
    /* background-color: yellow; */
    margin: 5px auto;
  }

  .con3p a {
    font-size: 14px;
    color: black;
    text-decoration: none;
  }


  .con3ul {
    width: 100%;
    height: 900px;
    /* background-color: #42B983; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .con3ul li {
    width: 296px;
    height: 260px;
    list-style: none;
    /* border: 1px solid #000000; */
    margin: 15px 10px;
  }

  .con3ul .te {
    width: 580px;
  }

  .con3ul .te img {
    width: 105%;
    height: 266px;
  }

  .con3ul li img {
    width: 100%;
    height: 100%;
  }

  .con3ul li a {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #000000;
  }

  /* 5 */
  /* 5 */
  .bot {
    width: 100%;
    height: 500px;
    background-color: black;
    overflow: hidden;
  }

  .bot .ul5 {
    width: 800px;
    height: 40px;
    margin: 30px auto;
    color: aliceblue;
    display: flex;
    flex-direction: row;
  }

  .bot .ul5 li {
    width: 137px;
    height: 40px;
    list-style: none;
    text-align: center;
    line-height: 40px;
  }

  .bot .ul5 li a {
    color: white;
    text-decoration: none;

  }

  .botd {
    width: 100%;
    height: 300px;
    margin: 10px auto;
    text-align: center;
    font-size: 20px;
    color: white;
  }

  .botd a {
    color: white;
    text-decoration: none;
  }

  .hen {
    width: 100%;
    height: 3px;
    background-color: white;
    margin-top: 50px;
  }

  .bot-ul {
    width: 800px;
    height: 200px;
    margin: 10px auto;

  }

  .bot-ul li {
    width: 200px;
    height: 200px;
    margin-left: 50px;
    list-style: none;
    float: left;
  }

  .bot-ul li img {
    width: 62px;
    height: 62px;
    margin-top: 40px;
  }

  .bot-ul li span {
    font-size: 13px;
  }
</style>
